<template>
  <div style="float: right;">
    <div class="project_select">
      <a-select @change="changeProject" style="width: 160px;" v-if="showProject" v-model="projectId">
        <a-select-option v-for="item in projectList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </div>
    <div :class="wrpCls">
      <helpDocument/>
      <a-select
        v-if="orgList && orgList.length > 0"
        class="org-select"
        v-model="orgId"
        @change="changeOrg"
        option-filter-prop="children"
        :filter-option="filterOption"
        show-search>
        <a-select-option v-for="item in orgList" :value="item.id" :key="item.id" :id="item.id" :name="item.name">{{ item.name }}</a-select-option>
      </a-select>
      <avatar-dropdown :menu="showMenu" :current-user="currentUser" :class="prefixCls" />
    </div>
  </div>
</template>

<script>
import AvatarDropdown from './AvatarDropdown'
import helpDocument from '@/components/GlobalHeader/helpDocument'
import {SELECTED_ORG} from "@/store/mutation-types";
import { mapActions, mapMutations } from 'vuex'
// 引入store实例
import store from '@/store'
// 引入本地存储
import storage from 'store'

export default {
  name: 'RightContent',
  components: {
    AvatarDropdown,
    helpDocument
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-pro-global-header-index-action'
    },
    isMobile: {
      type: Boolean,
      default: () => false
    },
    topMenu: {
      type: Boolean,
      required: true
    },
    theme: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      showMenu: true,
      currentUser: {},
      orgList:this.$store.state.orgs,
      orgId:"",
      projectId: '',
      projectList: []
    }
  },
  computed: {
    wrpCls () {
      return {
        'ant-pro-global-header-index-right': true,
        [`ant-pro-global-header-index-${(this.isMobile || !this.topMenu) ? 'light' : this.theme}`]: true
      }
    },
    showProject() {
      return ['OperationPlanManage', 'OperationPlanManageAudit', 'OperationPlanManageView', 'OperationPlanManageEdit', 'OperationPlanManageAdd'].includes(this.$route.name);
    }
  },
  watch :{
    "$store.state.orgs":{
      deep:true,
      handler:function(newVal){
        this.orgList = newVal
      }
    },
    "$store.state.selectedOrg.id":{
      handler:function(newVal){
        this.orgId = newVal
      }
    }
  },
  mounted () {
    this.orgList = this.$store.getters.orgs
    const org = this.$store.getters.selectedOrg
    if ( org && org.id){
      this.orgId = org.id
    }
    setTimeout(() => {
      this.currentUser = {
        name: this.$store.getters.userInfo.username
      }
    }, 1500);
    this.queryProjectList();
  },
  methods: {
    ...mapMutations('projectManage', ['setCurrentProjectId']),
    ...mapActions('projectManage', ['getProjectList']),
    queryProjectList() {
      this.getProjectList().then(res => {
        this.projectList = res;
        this.projectId = res[0].id;
        this.setCurrentProjectId(this.projectId);
      });
    },
    changeProject() {
      this.setCurrentProjectId(this.projectId);
      if (this.$route.name !== 'OperationPlanManage') {
        this.$router.push('/operationPlanManage');
      }
    },
    changeOrg (_,o){
      this.orgName = o.data.attrs.name
      const org = {
        id: o.data.attrs.id,
        name: o.data.attrs.name
      }
      storage.set(SELECTED_ORG, org)
      store.commit('SET_ORG',org)
      if (this.$route.name === 'Workplace'){
        this.$router.go(0)
      }else {
        this.$router.push({name: 'Workplace', params:{event:'changeOrg'}})
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  }

}
</script>

<style scoped>
.org-select {
  width: 150px;
}

.project_select {
  position: absolute;
  left: 50px;
}

</style>
